<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery实现幻灯片DEMO</title>
		<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
		<style type="text/css">
			#banner {
				width: 500px;
				height: 700px;
				overflow: hidden;
				position: relative;
			}

			.b-img {
				height: 500px;
				/* position:absolute;
				left:0;
				top:0; */
				position: absolute;
				left: 0;
				top: -100px;
			}

			.b-img span {
				display: block;
				height: 500px;
				float: left;
			}

			.b-list {
				height: 50px;
				/* padding-top:450px; */
				padding-top: 320px;
				position: relative;
				margin: 0 auto;
				z-index: 1;
			}

			.b-list span {
				display: block;
				cursor: pointer;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				border: 3px solid #eee;
				float: left;
				margin: 0 5px;
			}

			.b-list .spcss {
				border: 3px solid #14ab04;
			}

			.b-arror {
				width: 100%;
				float: left;
				position: relative;
				top: -240px;
				z-index: 1;
				font-size: 35px;
				color: #fff;
			}

			.b-arror em {
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<div class="b-img">
				<span href="###"
					style="background:url(http://www.jq22.com/img/cs/500x300-1.png) center no-repeat;"></span>
				<span href="###"
					style="background:url(http://www.jq22.com/img/cs/500x300-2.png) center no-repeat;"></span>
				<span href="###"
					style="background:url(http://www.jq22.com/img/cs/500x300-3.png) center no-repeat;"></span>
				<span href="###"
					style="background:url(http://www.jq22.com/img/cs/500x300-4.png) center no-repeat;"></span>
				<span href="###"
					style="background:url(http://www.jq22.com/img/cs/500x300-5.png) center no-repeat;"></span>
			</div>
			<div class="b-list"></div>

			<div class="b-arror">
				<div class="bar-left" style="float: left;">
					<em class="fa fa-chevron-left"></em>
				</div>
				<div class="bar-right" style="float: right;">
					<em class="fa fa-chevron-right"></em>
				</div>
			</div>
		</div>
	</body>
    <!-- https://www.jq22.com/webqd5894 -->
	<script type="text/javascript">
		//全屏滚动
		var picRun = function(fuclass) {
			var n = 0;
			var imgLength = $(fuclass).find('.b-img span').length;
			console.log(imgLength);
			var ctWidth = imgLength * 100;
			console.log(ctWidth);
			var itemWidth = 1 / imgLength * 100;
			console.log(itemWidth);

			//设置滚动盒子总宽度
			$(fuclass).find(".b-img").width(ctWidth + "%");

			//设置滚动盒子中每张图片宽度
			$(fuclass).find(".b-img span").width(itemWidth + "%");

			//设置选项按钮总宽度
			$(fuclass).find(".b-list").width(imgLength * 30);

			//追加选项按钮
			if (imgLength > 1) {
				for (var i = 0; i < imgLength; i++) {
					var listSpan = $("<span></span>")
					$(fuclass).find(".b-list").append(listSpan);
				}
			}

			//给默认第一个选项按钮添加被选中样式
			$(fuclass).find(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");

			//向右移动
			$(fuclass).find(".bar-right em").click(function() {
				if (n == imgLength - 1) {
					var ctPosit = (n + 1) * 100;
					$(fuclass).append($(".b-img").clone());
					$(fuclass).find(".b-img:last").css("left", "100%");
					$(fuclass).find(".b-img:first").animate({
						"left": "-" + ctPosit + "%"
					}, 1000);
					$(fuclass).find(".b-img:last").animate({
						"left": "0"
					}, 1000);
					var setTime0 = setTimeout(function() {
						$(fuclass).find(".b-img:first").remove();
					}, 1000);
					n = 0;
					$(fuclass).find(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass(
						"spcss");
				} else {
					n++;
					var ctPosit = n * 100;
					$(fuclass).find(".b-img").animate({
						"left": "-" + ctPosit + "%"
					}, 1000);
					$(fuclass).find(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass(
						"spcss");
				}
			})

			//向左移动
			$(fuclass).find(".bar-left em").click(function() {
				if (n == 0) {
					var stPosit = imgLength * 100;
					var etPosit = (imgLength - 1) * 100;
					$(fuclass).prepend($(".b-img").clone());
					$(fuclass).find(".b-img:first").css("left", "-" + stPosit + "%");
					$(fuclass).find(".b-img:last").animate({
						"left": "100%"
					}, 1000);
					$(fuclass).find(".b-img:first").animate({
						"left": "-" + etPosit + "%"
					}, 1000);
					var setTime0 = setTimeout(function() {
						$(fuclass).find(".b-img:last").remove();
					}, 1000);
					n = imgLength - 1;
					$(fuclass).find(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass(
						"spcss");
				} else {
					n--;
					var ctPosit = n * 100;
					$(fuclass).find(".b-img").animate({
						"left": "-" + ctPosit + "%"
					}, 1000);
					$(fuclass).find(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass(
						"spcss");
				}
			})

			//通过选项按钮选中图片
			$(fuclass).find(".b-list span").click(function() {
				//获得第几张图片被选中
				var lsIndex = $(this).index();
				n = lsIndex;
				var ctPosit = n * 100;
				$(fuclass).find(".b-img").animate({
					"left": "-" + ctPosit + "%"
				}, 1000);
				$(this).addClass("spcss").siblings("span").removeClass("spcss");
			})


			function rollEnvent() {
				if (n == imgLength - 1) {
					var ctPosit = (n + 1) * 100;
					//复制每个b-img元素并追加到banner元素
					$(fuclass).append($(".b-img").clone());
					$(fuclass).find(".b-img:last").css("left", "100%");
					$(fuclass).find(".b-img:first").animate({
						"left": "-" + ctPosit + "%"
					}, 1000);
					$(fuclass).find(".b-img:last").animate({
						"left": "0"
					}, 1000);
					var setTime0 = setTimeout(function() {
						//删除第一个b-img元素
						$(fuclass).find(".b-img:first").remove();
					}, 1000);
					n = 0;
					$(fuclass).find(".b-list span:eq(0)").addClass("spcss").siblings("span").removeClass("spcss");
				} else {
					n++;
					var ctPosit = n * 100;
					$(fuclass).find(".b-img").animate({
						"left": "-" + ctPosit + "%"
					}, 1000);
					$(fuclass).find(".b-list span:eq(" + n + ")").addClass("spcss").siblings("span").removeClass("spcss");
				}
			}

			//每4秒图片滚动一次
			var slidesetInterval = setInterval(rollEnvent, 4000);

			$(fuclass).hover(function() {
				//当鼠标指针悬停在banner元素节点时，停止滚动
				clearInterval(slidesetInterval);
			}, function() {
				//当鼠标指针移走时，继续滚动
				slidesetInterval = setInterval(rollEnvent, 4000);
			});
		}

		picRun('#banner');
	</script>
</html>
